    <style type="text/css">
      #footer {
        height: auto;  
      }
      #footer #footer-service {
        padding-top: 15px;
      }
      #footer h3 {
        text-align: left;
        margin-bottom: 0;
      }
      #footer li {
        text-align: left;
        padding-bottom: 15px;
        padding-left: 20px;

      }
      #footer li > i {
        margin-right: 10px;
        color: #0072BC;
        font-size: 20pt;
      }
      #footer #contact-form {
        /*background-color: #7EA7D8;*/
        padding-top: 15px;
        padding-bottom: 15px;
        color: #FEFEFE;
      }
      #footer form {
        text-align: left !important;
        color: #7EA7D8 !important;
        background-color: transparent;
      }
      #footer label {
        color: #BFC9CA;
        font-size: 16px;
        position: absolute;
        right: 25px;
        top: 10px;
        transition: all 0.25s ease 0s;
      }
      #footer .form-control {

      }
      #footer button {
        background-color: #FFF;
        border: 1px solid #CCC;
      }
      #footer button:hover {
        background-color: #CCC;
      }
      #notif {
        position: fixed;
        top: 100px;
        right: 20px;
        background-color: #F6989D;
        color: white;
        padding: 20px;
        min-width: 300px;
        display: none;
      }
    </style>

    <div class="component-placer">
      <a href="#wheel4" class="wheel-button nw">
        <img src="/img/Azure.png" alt="">
      </a>
      <ul id="wheel4" data-angle="NW" class="wheel">
        <li class="item"><a href="#home"><i class="fa fa-3x fa-facebook"></i></a></li>
        <li class="item"><a href="#home"><i class="fa fa-3x fa-twitter"></i></a></li>
        <li class="item"><a href="#home"><i class="fa fa-3x fa-instagram"></i></a></li>
        <li class="item"><a href="#home"><i class="fa fa-3x fa-google-plus"></i></a></li>
        <li class="item"><a href="#home"><i class="fa fa-3x fa-gamepad"></i></a></li>
      </ul>
    </div>
    
    <div id="footer">
      <div class="content row">
        <div class="col-xs-12 col-sm-4">
          <h3>Layanan Kami:</h3>
          <div id="footer-service" class="row">
            <ul>
                <li><i class="fa fa-desktop"></i>Web Development</li>
                <li><i class="fa fa-code"></i>System Development</li>
                <li><i class="fa fa-cube"></i>Logo Desain</li>
                <li><i class="fa fa-hand-o-up"></i>SEO Marketing</li>
            </ul>
          </div>
        </div>
        <div id="footer-top" class="col-xs-12 col-sm-8">
          <!-- <h3>Contact Us:</h3> -->
          <h3>Hubungi Kami:</h3>
          <div class="row" id="contact-form">
            <form role="form" onsubmit="return validate(event)" id="form-contact">
              <div class="form-group col-xs-12 col-sm-6">
                <input type="text" class="form-control" id="name" placeholder="Masukkan nama lengkap anda">
                <label for=""><i class="fa fa-user"></i></label>
              </div>
              <div class="form-group col-xs-12 col-sm-6">
                <input type="email" class="form-control" id="email" placeholder="Masukkan email anda">
                <label for=""><i class="fa fa-envelope"></i></label>
              </div>
              <div class="form-group col-xs-12">
                <textarea class="form-control" id="request" rows="6" placeholder="Silahkan tinggalkan permintaan Anda"></textarea>
              </div>
              <div class="btn-placer col-xs-12">
                <button type="submit" class="btn">I'm Done</button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div id="footer-bottom" class="content row">
        <p>@2014 Azure Team</p>
      </div>
    </div>
  </div>
  <div id="notif">
    <!-- Please Fill the Missing Input. -->
    Silahkan isi pada inputan yang kosong
  </div>


  <!-- JQuery -->
  <script type="text/javascript" src="js/bootstrap.js"></script>
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="js/jssor.core.js"></script>
  <script type="text/javascript" src="js/jssor.utils.js"></script>
  <script type="text/javascript" src="js/jssor.slider.js"></script>
  <script type="text/javascript" src="js/moment.js"></script>
  <script type="text/javascript" src="js/init.js"></script>
  <script type="text/javascript" src="js/polyfills.js"></script>
  <script type="text/javascript" src="js/classie.js"></script>
  <script type="text/javascript" src="js/classie.js"></script>
  <script type="text/javascript" src="js/jquery.inview.js"></script>

  <script type="text/javascript" src="js/jquery.wheelmenu.js"></script>
  <script src="js/modernizr-2.6.2.min.js"></script>
  <script src="js/modernizr.custom.js"></script>
  <script src="js/grid.js"></script>
  
  <script>
    $(document).ready(function() {
      window_height = $(window).height();
      footer_top = $('#footer-top').height();
      footer_bottom = $('#footer-bottom').height();
      header_menu = $('#header-menu').height();

      // alert("window: "+window_height+"; footer_top: "+footer_top+"; footer_bottom: "+footer_bottom+"; header: "+header_menu);

      file_port = window_height - footer_top - footer_bottom - header_menu - 20;
      $('#file-port').css('min-height', file_port);

      // $(document).on('beforeunload', function(event) {
      //   event.preventDefault();
      //   /* Act on the event */
      //   alert("you are trying to move page");
      //   return false;
      // });
      window.onbeforeunload = function(){
        // whatever you want to do now
        if (emailNotSent) {
          return "Your email hasn't been sent, please be patient...";
        };
      };
      Grid.init();
    });

    function validate(event) {
      event.preventDefault();
      name = $('#name').val();
      email = $('#email').val();
      request = $('#request').val();
      
      if(name == '' || email == '' || request == '') {
        if (name == "") { $('#name').addClass('input-error'); };
        if (email == "") { $('#email').addClass('input-error'); };
        if (request == "") { $('#request').addClass('input-error'); };
        $('#notif').html("Please Fill the Missing Input.").show().delay(3000).fadeOut(3000);
        return false;
      } else { 
        $.ajax({
          url: 'send-mail.php',
          type: 'POST',
          data: {
            name: $('#name').val(),
            email: $('#email').val(),
            request: $('#request').val()
          },
          beforeSend: function(data) {
            console.log("sending");
            $('#notif').html("Sending Email...").show().delay(3000).fadeOut(3000);
          },
          success: function(data) {
            $('#notif').html("Request has successfully sent.").show().delay(3000).fadeOut(3000);
          },
          complete: function(data) {
            console.log("complete");
          },
          error: function(data) {
            // $('#notif').html("Error Sending Request.").show().delay(3000).fadeOut(3000);
          }
        })
      }
    }
  </script>
</body>
</html>
  <script>
    var buttons7Click = Array.prototype.slice.call( document.querySelectorAll( '#btn-click button' ) ),
      buttons9Click = Array.prototype.slice.call( document.querySelectorAll( 'button.btn-8g' ) ),
      totalButtons7Click = buttons7Click.length,
      totalButtons9Click = buttons9Click.length;

    buttons7Click.forEach( function( el, i ) { el.addEventListener( 'click', activate, false ); } );
    buttons9Click.forEach( function( el, i ) { el.addEventListener( 'click', activate, false ); } );

    function activate() {
      var self = this, activatedClass = 'btn-activated';

      if( classie.has( this, 'btn-7h' ) ) {
        // if it is the first of the two btn-7h then activatedClass = 'btn-error';
        // if it is the second then activatedClass = 'btn-success'
        activatedClass = buttons7Click.indexOf( this ) === totalButtons7Click-2 ? 'btn-error' : 'btn-success';
      }
      else if( classie.has( this, 'btn-8g' ) ) {
        // if it is the first of the two btn-8g then activatedClass = 'btn-success3d';
        // if it is the second then activatedClass = 'btn-error3d'
        activatedClass = buttons9Click.indexOf( this ) === totalButtons9Click-2 ? 'btn-success3d' : 'btn-error3d';
      }

      if( !classie.has( this, activatedClass ) ) {
        classie.add( this, activatedClass );
        setTimeout( function() { classie.remove( self, activatedClass ) }, 1000 );
      }
    }

    $(document).ready(function() {
      $(".wheel-button").wheelmenu({
        trigger: "click",
        animation: "fly",
        angle: "NW"
      });
    });
  </script>